<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>yikayun</title>
    <link rel="stylesheet" type="" href="./css/icons/iconfont.css">
    <link rel="stylesheet" type="" href="./css/reset.css">
    <link rel="stylesheet" type="" href="./css/index.css">
    <link rel="stylesheet" type="" href="./css/footer.css">
    <link rel="stylesheet" href="./css/login.css">
    <link rel="stylesheet" href="./css/resgister.css">
    <link rel="stylesheet" type="" href="./css/swiper-3.4.2.min.css">
</head>

<body>
    <!-- 头部区域 -->
    <header>
        <div class="logo">
           <a href="./index.html"><img src="./images/logo.png" alt="我要去印"></a> 
        </div>
        <div class="iconmenu">
            <input type="text" value="" placeholder="搜索">
            <i class="iconfont icon-sousuo"></i>
        </div>
        <button class="login"><a href="javascript:void(0)">登陆 / 注册</a></button>
    </header>
    <!-- 轮播图区域 -->
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide"><img src="./images/banner.png" alt=""></div>
            <div class="swiper-slide"><img src="./images/banner.png" alt=""></div>
        </div>
        <!--分页器 -->
        <div class="swiper-pagination"></div>
    </div>
    </div>
    <!-- 菜单栏区域 -->
    <div class="menu">
        <div class="totalType">
            <span>风格</span>
            <ul class="style clearfix">
                <li class="total">全部</li>
                <li>小清新</li>
                <li>中国红</li>
                <li>商务</li>
                <li>简约大方</li>
                <li>全部</li>
                <li>小清新</li>
                <li>中国红</li>
                <li>商务</li>
                <li>简约大方</li>
                <li>更多﹀</li>
            </ul>
        </div>
        <div class="totalCard">
            <span>用途</span>
            <ul class="total-card clearfix">
                <li>全部</li>
                <li class="staff">员工卡</li>
                <li>活动卡</li>
                <li>会员卡</li>
            </ul>
        </div>
        <div class="paixu">
            <span>排序</span>
            <ul class="rank clearfix">
                <li class="update"><i class="iconfont icon-redo"></i>最近更新</li>
                <li><i class="iconfont icon-xiazai"></i>使用量</li>
            </ul>
        </div>
    </div>
    <!-- 主体内容区域 -->
    <div class="content">
        <div class="content-moudle">
            <ul class="clearfix first-ul">
                <li class="blank-moudle">
                    <div>
                        <i class="iconfont icon-jia"></i>
                        <p class="text-moudle">
                            创建一个空白模板
                        </p>
                    </div>
                </li>
                <li>
                    <div class="content-photos">
                        <a href="#"><img src="./images/myOrderImg.jpg" alt=""></a>
                        <div class="like"><i class="iconfont icon-xihuan"></i></div>
                        <div class="use"><i class="iconfont icon-bianji"></i></div>
                        <p class="love">喜欢</p>
                        <p class="empoly">使用</p>
                        <div class="tpl-mask">
                        </div>
                    </div>
                    <div class="content-text">
                        <p>清爽白色员工</p>
                        <p> <span class="free">免费</span>
                            <span><i class="iconfont icon-kanguo"></i>1662</span>
                            <span><i class="iconfont icon-xihuan"></i>54</span>
                        </p>
                    </div>
                </li>
                <li>
                    <div class="content-photos">
                        <a href="#"><img src="./images/myOrderImg.jpg" alt=""></a>
                        <div class="like"><i class="iconfont icon-xihuan"></i></div>
                        <div class="use"><i class="iconfont icon-bianji"></i></div>
                        <p class="love">喜欢</p>
                        <p class="empoly">使用</p>
                        <div class="tpl-mask">
                        </div>
                    </div>
                    <div class="content-text">
                        <p>清爽白色员工</p>
                        <p> <span class="free">免费</span>
                            <span><i class="iconfont icon-kanguo"></i>1662</span>
                            <span><i class="iconfont icon-xihuan"></i>54</span>
                        </p>
                    </div>
                </li>
                <li>
                    <div class="content-photos">
                        <a href="#"><img src="./images/myOrderImg.jpg" alt=""></a>
                        <div class="like"><i class="iconfont icon-xihuan"></i></div>
                        <div class="use"><i class="iconfont icon-bianji"></i></div>
                        <p class="love">喜欢</p>
                        <p class="empoly">使用</p>
                        <div class="tpl-mask">
                        </div>
                    </div>
                    <div class="content-text">
                        <p>清爽白色员工</p>
                        <p> <span class="free">免费</span>
                            <span><i class="iconfont icon-kanguo"></i>1662</span>
                            <span><i class="iconfont icon-xihuan"></i>54</span>
                        </p>
                    </div>
                </li>
            </ul>
        </div>
        <div class="content-moudle">
            <ul class="clearfix">
                <li>
                    <div class="content-photos">
                        <a href="#"><img src="./images/myOrderImg.jpg" alt=""></a>
                        <div class="like"><i class="iconfont icon-xihuan"></i></div>
                        <div class="use"><i class="iconfont icon-bianji"></i></div>
                        <p class="love">喜欢</p>
                        <p class="empoly">使用</p>
                        <div class="tpl-mask">
                        </div>
                    </div>
                    <div class="content-text">
                        <p>清爽白色员工</p>
                        <p> <span class="free">免费</span>
                            <span><i class="iconfont icon-kanguo"></i>1662</span>
                            <span><i class="iconfont icon-xihuan"></i>54</span>
                        </p>
                    </div>
                </li>
                <li>
                    <div class="content-photos">
                        <a href="#"><img src="./images/myOrderImg.jpg" alt=""></a>
                        <div class="like"><i class="iconfont icon-xihuan"></i></div>
                        <div class="use"><i class="iconfont icon-bianji"></i></div>
                        <p class="love">喜欢</p>
                        <p class="empoly">使用</p>
                        <div class="tpl-mask">
                        </div>
                    </div>
                    <div class="content-text">
                        <p>清爽白色员工</p>
                        <p> <span class="free">免费</span>
                            <span><i class="iconfont icon-kanguo"></i>1662</span>
                            <span><i class="iconfont icon-xihuan"></i>54</span>
                        </p>
                    </div>
                </li>
                <li>
                    <div class="content-photos">
                        <a href="#"><img src="./images/myOrderImg.jpg" alt=""></a>
                        <div class="like"><i class="iconfont icon-xihuan"></i></div>
                        <div class="use"><i class="iconfont icon-bianji"></i></div>
                        <p class="love">喜欢</p>
                        <p class="empoly">使用</p>
                        <div class="tpl-mask">
                        </div>
                    </div>
                    <div class="content-text">
                        <p>清爽白色员工</p>
                        <p> <span class="free">免费</span>
                            <span><i class="iconfont icon-kanguo"></i>1662</span>
                            <span><i class="iconfont icon-xihuan"></i>54</span>
                        </p>
                    </div>
                </li>
                <li>
                    <div class="content-photos">
                        <a href="#"><img src="./images/myOrderImg.jpg" alt=""></a>
                        <div class="like"><i class="iconfont icon-xihuan"></i></div>
                        <div class="use"><i class="iconfont icon-bianji"></i></div>
                        <p class="love">喜欢</p>
                        <p class="empoly">使用</p>
                        <div class="tpl-mask">
                        </div>
                    </div>
                    <div class="content-text">
                        <p>清爽白色员工</p>
                        <p> <span class="free">免费</span>
                            <span><i class="iconfont icon-kanguo"></i>1662</span>
                            <span><i class="iconfont icon-xihuan"></i>54</span>
                        </p>
                    </div>
                </li>
            </ul>
        </div>
        <div class="content-moudle">
            <ul class="clearfix">
                <li>
                    <div class="content-photos">
                        <a href="#"><img src="./images/myOrderImg.jpg" alt=""></a>
                        <div class="like"><i class="iconfont icon-xihuan"></i></div>
                        <div class="use"><i class="iconfont icon-bianji"></i></div>
                        <p class="love">喜欢</p>
                        <p class="empoly">使用</p>
                        <div class="tpl-mask">
                        </div>
                    </div>
                    <div class="content-text">
                        <p>清爽白色员工</p>
                        <p> <span class="free">免费</span>
                            <span><i class="iconfont icon-kanguo"></i>1662</span>
                            <span><i class="iconfont icon-xihuan"></i>54</span>
                        </p>
                    </div>
                </li>
                <li>
                    <div class="content-photos">
                        <a href="#"><img src="./images/myOrderImg.jpg" alt=""></a>
                        <div class="like"><i class="iconfont icon-xihuan"></i></div>
                        <div class="use"><i class="iconfont icon-bianji"></i></div>
                        <p class="love">喜欢</p>
                        <p class="empoly">使用</p>
                        <div class="tpl-mask">
                        </div>
                    </div>
                    <div class="content-text">
                        <p>清爽白色员工</p>
                        <p> <span class="free">免费</span>
                            <span><i class="iconfont icon-kanguo"></i>1662</span>
                            <span><i class="iconfont icon-xihuan"></i>54</span>
                        </p>
                    </div>
                </li>
                <li>
                    <div class="content-photos">
                        <a href="#"><img src="./images/myOrderImg.jpg" alt=""></a>
                        <div class="like"><i class="iconfont icon-xihuan"></i></div>
                        <div class="use"><i class="iconfont icon-bianji"></i></div>
                        <p class="love">喜欢</p>
                        <p class="empoly">使用</p>
                        <div class="tpl-mask">
                        </div>
                    </div>
                    <div class="content-text">
                        <p>清爽白色员工</p>
                        <p> <span class="free">免费</span>
                            <span><i class="iconfont icon-kanguo"></i>1662</span>
                            <span><i class="iconfont icon-xihuan"></i>54</span>
                        </p>
                    </div>
                </li>
                <li>
                    <div class="content-photos">
                        <a href="#"><img src="./images/myOrderImg.jpg" alt=""></a>
                        <div class="like"><i class="iconfont icon-xihuan"></i></div>
                        <div class="use"><i class="iconfont icon-bianji"></i></div>
                        <p class="love">喜欢</p>
                        <p class="empoly">使用</p>
                        <div class="tpl-mask">
                        </div>
                    </div>
                    <div class="content-text">
                        <p>清爽白色员工</p>
                        <p> <span class="free">免费</span>
                            <span><i class="iconfont icon-kanguo"></i>1662</span>
                            <span><i class="iconfont icon-xihuan"></i>54</span>
                        </p>
                    </div>
                </li>
            </ul>
        </div>
    </div>
    <!-- 分页器区域 -->
    <div class="sorter">
        <div class="triangle-left">
            <div class="left"></div>
        </div>
        <ul class="paging clearfix">
            <li><a href="">1</a></li>
            <li><a href="">2</a></li>
            <li><a href="">3</a></li>
            <li><a href="">4</a></li>
            <li><a href="">5</a></li>
            <li><a href="">6</a></li>
            <li><a href="">...</a></li>
            <li><a href="">N</a></li>
        </ul>
        <div class="triangle-right">
            <div class="right"></div>
        </div>
        <div class="sureBtn">
            <span style="font-size:12px;color: #989898">跳到</span>
            <input type="text" class="square">
            <button>确定</button>
        </div>
    </div>
    <footer>
        <div class="wqb">
            <img src="./images/weixin.jpg" alt="">
            <img src="./images/weibo.jpg" alt="">
            <img src="./images/qq.jpg" alt="">
        </div>
        <div class="footer-info clearfix">
            <ul class="clearfix">
                <li><a href="javascript:void(0)">关于我们</a></li>
                <li><a href="javascript:void(0)">|</a></li>
                <li><a href="javascript:void(0)">联系我们</a></li>
                <li><a href="javascript:void(0)">|</a></li>
                <li><a href="javascript:void(0)">加入我们</a></li>
                <li><a href="javascript:void(0)">|</a></li>
                <li><a href="javascript:void(0)">商务合作</a></li>
            </ul>
            <p>版权所有&nbsp©&nbsp京ICP备14007358号-1 / 京公网安备11010802014104号</p>
        </div>
        <div class="erweima"><img src="./images/erweima.jpg" alt=""></div>
    </footer>
    <div class="hide-container"></div>
    <div class="hide-content">
        <img src="./images/myOrderImg.jpg" alt="">
        <p class="hide-text">注意文字限制两行 蓝色简洁清新名片卡公司员工蓝色简洁清新名片卡公司员工蓝色简洁清新名片卡公司员工</p>
        <p class="price"> <span class="money">129元</span>
            <span><i class="iconfont icon-kanguo">1662</i></span>
            <span class="num"><i class="iconfont icon-xihuan">54</i></span>
        </p>
        <div class="btn">
            <button>下载源文件</button>
            <button id="promptly">立即使用</button>
        </div>
    </div>
    <!-- 登陆 -->
    <div class="login-container">
        <div class="user-login">
            <h1>登录</h1>
        </div>
        <form action="" method="post">
            <div class="tel-phone"><input name="" type="text" maxLength="11" class="phone" placeholder="请输入您的手机号" />
                <span class="tel">格式有误</span>
            </div>
            <div><input name="" type="text" class="login-yanzm" placeholder="请输入您的验证码" />
                <button class="login-post">发送验证码</button>
            </div>
            <div class="tishi fl">验证码错误</div>
            <div class="Noresgiter"><a href="javascript:void(0)">还未注册?</a> </div>
            <button class="toLogin">登录</button>
        </form>
    </div>
    <!-- 注册 -->
    <div class="resgister-container">
        <div class="resgister">
            <h1>注册</h1>
        </div>
        <form action="" method="">
            <div class="tel-phone"><label><span>*</span>&nbsp手机号<input name="" type="text" maxLength="11"  class="phone"  placeholder="请输入您的手机号"/></label>
                <span class="hint">格式有误</span>
            </div>
            <div><label><span>*</span>&nbsp验证码<input name="" type="text" class="yanzm" placeholder="请输入您的验证码" /></label>
                <button class="post-yzm">发送验证码</button>
            </div>
            <div><label>真实姓名<input name="" type="text" value=""  placeholder="请输入您的真实姓名"/> </label></div>
            <div><label>电子邮箱<input name="" type="email" value=""  placeholder="请输入您的电子邮箱"/> </label></div>
            <div><label>工作单位<input name="" type="text" value=""  placeholder="请输入您的工作单位"/> </label></div>
            <div><label>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp职位<input name="" type="text" value=""  placeholder="请输入您的职位"/> </label></div>
            <div class="toLogin"><a href="javascript:void(0)">已有账号，去登录</a></div>
            <button class="regeiter">注册</button>
        </form>
    </div>

</body>
<script src="./js/jquery.min.js"></script>
<script src="./js/swiper-3.4.2.min.js"></script>
<script src="./js/index.js"></script>

</html>